import './index.css'
import { useRef } from 'react'
function AnimationComponent() {
    const boxRef = useRef<HTMLDivElement>(null)
    const addColor = () => {
        // boxRef.current?.classList.add('colorChange')
        // boxRef.current?.addEventListener('animationend', () => {
        //     boxRef.current?.classList.remove('colorChange');
        // });
        // boxRef.current?.classList.add('trans')
        let start: number | null = null;
        const animate = (timestamp: number) => {
            if (!start) start = timestamp;
            const progress = timestamp - start;
            
            if (boxRef.current) {
                // 在2秒内将元素向右移动200px
                const moveX = Math.min(progress / 2000 * 200, 200);
                boxRef.current.style.transform = `translateX(${moveX}px)`;
            }

            if (progress < 2000) { // 动画持续2秒
                requestAnimationFrame(animate);
            }
        };
        
        requestAnimationFrame(animate);
    }
    return ( 
        <div>
            <div className="box" ref={boxRef} onClick={addColor}>

            </div>
        </div>
     );
}

export default AnimationComponent;